<template>
  <div class="pieMain">
    <div class="pie" :id="propses.id"></div>
  </div>
</template>
<script lang='ts' setup>
// 引入图表库
import * as echarts from "echarts";
import { onMounted } from "vue";
type EChartsOption = echarts.EChartsOption;
const propses = defineProps({
  id: {
    type: String, //类型字符串
    default: "",
  },

  data: {
    type: Array, //类型数组
    default: [],
  },
});
const clickIsDis = (id, data) => {
  /**************设备概览图表start********************/
  var chartDom = document.getElementById(id)!;
  setTimeout(() => {
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;
    let countValue = 88;
    let amountValue = 0;
    let dataList = data;

    dataList.forEach((item) => {
      amountValue += item.value;
    });
    option = {
      backgroundColor: "#f6f7f9",
      media: [
        {
          query: {
            maxWidth: 550,
          },
          option: {
            legend: {
              left: "46%",
              textStyle: {
                color: "#000",
                rich: {
                  name: {
                    verticalAlign: "right",
                    align: "left",
                    width: 40,
                    fontSize: 12,
                    color: "#333",
                  },
                  value: {
                    align: "left",
                    width: 75,
                    fontSize: 12,
                    color: "#333",
                  },
                  un: {
                    color: "#333",
                    fontSize: 12,
                    align: "left",
                  },
                  gang: {
                    color: "#ccc",
                    width: 20,
                    fontSize: 12,
                    align: "center",
                  },
                  scale: {
                    fontSize: 12,
                    color: "#ccc",
                    width: 40,
                    align: "left",
                  },
                },
              },
            },
          },
        },
        {
          query: {
            minWidth: 560,
          },
          option: {
            legend: {
              left: "52%",
              textStyle: {
                color: "#000",
                rich: {
                  name: {
                    verticalAlign: "right",
                    align: "left",
                    width: 80,
                    fontSize: 14,
                    color: "#333",
                  },
                  value: {
                    align: "left",
                    width: 60,
                    fontSize: 14,
                    color: "#333",
                  },
                  un: {
                    color: "#333",
                    fontSize: 14,
                    align: "left",
                  },
                  gang: {
                    color: "#ccc",
                    width: 20,
                    fontSize: 14,
                    align: "center",
                  },
                  scale: {
                    fontSize: 14,
                    color: "#ccc",
                    // width: 50,
                    align: "left",
                  },
                },
              },
            },
          },
        },
        {
          query: {
            maxWidth: 441,
          },
          option: {
            legend: {
              left: "46%",
              textStyle: {
                rich: {
                  name: {
                    width: 35,
                    fontSize: 10,
                  },
                  value: {
                    width: 72,
                    fontSize: 10,
                  },
                  un: {
                    fontSize: 10,
                  },
                  gang: {
                    width: 10,
                    fontSize: 10,
                  },
                  scale: {
                    fontSize: 10,
                    width: 23,
                  },
                },
              },
            },
          },
        },
      ],
      legend: {
        selectedMode: false, // 取消图例上的点击事件
        type: 'scroll', // 启用滚动分页
        orient: "vertical",
        left: "55%",
        icon: "circle",
        top: "22%",
        align: "left",
        itemGap: 20,
        itemWidth: 10, // 设置宽度
        itemHeight: 10, // 设置高度
        symbolKeepAspect: false,
        data: dataList.map((item) => {
          return item.name;
        }),
        formatter: function (name) {
          if (dataList && dataList.length) {
            for (var i = 0; i < dataList.length; i++) {
              if (name === dataList[i].name) {
                console.log("+++",dataList[i])
                return (
                  "{name| " +
                  name +
                  "} " +
                  "{gang| " +
                  "|" +
                  "} " +
                  "{scale|" +
                  // dataList[i].percentage +
                  (dataList[i].value / amountValue).toFixed(1) +
                  "%" +
                  "}" +
                  "{value| " +
                  dataList[i].value +
                  "}" +
                  "{un|" +
                  dataList[i].nm +
                  "}"
                );
              }
            }
          }
        },
        textStyle: {
          color: "#000",
          // rich: {
          //   name: {
          //     // verticalAlign: "right",
          //     align: "left",
          //     width: 60,
          //     fontSize: 15,
          //     color: "#333",
          //   },
          //   value: {
          //     align: "left",
          //     width: 50,
          //     fontSize: 15,
          //     color: "#333",
          //   },
          //   un: {
          //     color: "#333",
          //     fontSize: 14,
          //     align: "left",
          //   },
          //   gang: {
          //     color: "#ccc",
          //     width: 20,
          //     fontSize: 14,
          //     align: "center",
          //   },
          //   scale: {
          //     fontSize: 16,
          //     color: "#ccc",
          //     width: 60,
          //     align: "left",
          //   },
          // },
        },
      },
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0,0,0,0.80)",
        // formatter: "{b} : {c} (个)",
        formatter: (params) => {
          let templete = "";

          // console.log(item.axisValue)
          let color = params.color;

          templete +=
            '<span style="display: inline-block; width: 8px; height: 8px;border-radius: 50%; background-color: ' +
            color +
            '; margin-right: 4px;"></span>';
          templete +=
            params.data.name + `: ` + params.data.value + "(个)" + "<br>";

          return templete;
        },
        borderColor: "#000",
        textStyle: {
          color: "#fff",
        },
      },
      title: [
        {
          left: "24%",
          top: "40%",
          textAlign: "center",
          text: "{a|" + amountValue.toFixed(0) + "}{c|}",
          textStyle: {
            fontSize: 14,
            rich: {
              a: {
                fontSize: 24,
                color: "#313131",
              },
              c: {
                fontSize: 10,
                color: "#535353",
              },
            },
          },
          subtext: "监测目标总数",
          subtextStyle: {
            fontSize: 12,
            color: ["#535353"],
          },
        },
      ],
      series: [
        {
          name: "报警",
          type: "pie",
          radius: ["52%", "64%"],
          center: ["25%", "48%"],
          data: dataList,
          label: {
            show: false,
          },
          // 环图之间间隔
          itemStyle: {
            borderWidth: 2,
            borderColor: "#fff",
          },
        },
      ],
      color: ["#FF6666", "#FFBB03", "#12CE88", "#0275FF"],
    };
    option && myChart.setOption(option);
    console.log(JSON.stringify(option))
    /**************设备概览图表end********************/
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }, 200);
};
onMounted(() => {
  clickIsDis(propses.id, propses.data);
});
defineExpose({ clickIsDis });
</script>
<style scoped>
.pieMain {
  margin-top: 20px;
  padding-top: 10px;
  background: #f6f7f9;
  width: 100%;
  border-radius: 12px;
  height: 294px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.pie {
  width: 100%;
  height: 100%;
}
</style>